/**
 * Created by wangjz on 2018/11/27.
 */
import React, { Component } from 'react';
import { Layout, Menu, message } from 'antd';
import '../less/SiderMenuLayout.less';
import { inject, observer } from 'mobx-react';
import RightContent from './RightContent';
import Logo from './Logo';
import SiderMenu from './SiderMenu';
import { createFromIconfontCN } from '@ant-design/icons';

const { Header, Content, Sider } = Layout;
const Icon = createFromIconfontCN({
  scriptUrl: 'public/icon/all.js', // 在 iconfont.cn 上生成
});

@inject('store')
@observer
class SiderMenuLayout extends Component {
  state = {
    collapsed: false,
    topMenuItem: {},
    topCurrent: '',
  };

  /**
   * 生成菜单
   * @returns {*}
   */
  topMenu = () => {
    const topSubMenu = children => {
      if (children == null) {
        return null;
      }

      let childrenNode = [];
      for (let item of children) {
        childrenNode.push(<Menu.Item key={item.id}>
          {item.icon ? <Icon type={item.icon}/> : ''} {item.name}
        </Menu.Item>);
      }
      return childrenNode;
    };

    let topFirstLevelMenu = this.props.store.getCfgValue('layout.sider.topFirstLevelMenu');
    if (topFirstLevelMenu == 'false') {
      return <div/>;
    }

    // if (this.state.topCurrent == '' && this.props.store.userInfo.moduleTree[0].isLeaf) {
    //   this.state.collapsed = true;
    // }
    return (
      <Menu className='nav'
            onSelect={this.handleTopClickMenu}
            selectedKeys={[this.state.topCurrent == '' ? '' + this.props.store.userInfo.moduleTree[0].id : this.state.topCurrent]}
            mode="horizontal">
        {topSubMenu(this.props.store.userInfo.moduleTree)}
      </Menu>);
  };


  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  /**
   * 点击菜单
   * @param item
   * @param key
   * @param keyPath
   */
  handleTopClickMenu = ({ item, key, keyPath }) => {
    let data = this.props.store.userInfo.moduleTree;
    for (let i = 0; i < data.length; i++) {
      if (data[i].id == key) {
        if (data[i].isLeaf) {
          this.handleLeftClickMenu(key);
        }
        this.setState({ topMenuItem: data[i], topCurrent: key });
        break;
      }
    }
  };

  handleLeftClickMenu = key => {
    let clickItem = this.props.store.changeUrl(key);
    if (clickItem.url == null || clickItem.url == '') {
      message.success(clickItem.name + '功能未开通!', 3);
    }
  };

  render() {
    const { store } = this.props;
    // 菜单主题
    let theme = store.getCfgValue('layout.menu.theme');
    let topFirstLevelMenu = store.getCfgValue('layout.sider.topFirstLevelMenu');
    let leftMenuWidth = store.getCfgValue('layout.sider.leftMenuWidth');

    let siderMenuDataSource = topFirstLevelMenu == 'true' ? (this.state.topCurrent == '' ? store.userInfo.moduleTree[0].children : this.state.topMenuItem.children) : store.userInfo.moduleTree;
    return (
      <Layout className='layout'>
        <Sider className='sider' width={leftMenuWidth == '' ? 250 : leftMenuWidth} trigger={null}
               collapsible collapsed={this.state.collapsed}>
          <Layout className={`${theme == 'dark' ? 'backgroundDark' : 'backgroundLight layout'}`}>
            <Header className={`header ${theme == 'dark' ? 'backgroundDark' : 'backgroundLight'}`}>
              <Logo theme={theme} collapsed={this.state.collapsed}/>
            </Header>
            <Content style={{ marginTop: '2px' }}
                     className={`${theme == 'dark' ? 'backgroundDark' : 'backgroundLight'} 'content'`}>
              <SiderMenu theme={{ theme }} onSelect={this.handleLeftClickMenu}
                         dataSource={siderMenuDataSource}
                         theme={theme}/>
            </Content>
          </Layout>
        </Sider>
        <Layout >
          <Header className='header'>
            <div className='header-content'>
              <div style={{ color: '#001528' }}>
                <Icon style={{ cursor: 'pointer' }}
                      type={this.state.collapsed ? 'iconoutdent' : 'iconindent'}
                      onClick={this.toggle}/>
              </div>
              <div>{this.topMenu()}</div>
              <div><RightContent theme={!theme} user={store.userInfo.user}/></div>
            </div>
          </Header>
          <Content className='content'>
            <iframe src={store.currentUrl} className='iframe'/>
          </Content>
        </Layout>
      </Layout>
    );
  }
}

export default SiderMenuLayout;
